<template>
  <div>
    <div id="dChartOne" style="width:100%;height:340px;"></div>
    <!-- <div class="circle"></div> -->
    <div class="list-box">
      <ul class="one-list">
        <li v-for="(item, index) in list" :key="index" :class="{'active': index===Index}" @click="changeKey(item.key)">
          <p><span class="point" :style="{'background-color': item.color}"></span><span class="label">{{item.key}}</span><i>：{{item.percentage}}%</i></p>
        </li>
      </ul>
    </div>
    <!-- noData -->
    <div v-if="noData" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import Ecolors from '@/utils/chartsColors'
import {resize} from '@/utils/utils'
export default {
  mixins: [resize],
  data() {
    return {
      dChartOne: null,
      dChartOneData: [],
      list: [],
      maxKey:'',
      Index: 0,
      noData: false
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.getChartOneData()
    },
    // 涉及技术领域
    getChartOneData() {
      this.$post(this.$Url.team.analysis, {
        musts: {
          date_sort: '1',
          'in2id.id': this.info.key,
        },
        aggs: {
          type: 'base',
          size: '10',
          field: 'ipc_kind'
        }
      }).then(res => {
        let data = res.data || []

        if (!this.dChartOne) {
          this.dChartOne = this.$echarts.init(document.getElementById('dChartOne'))
        }
        if (data && data.length > 0) {
          let d = JSON.parse(JSON.stringify(data))
          d = d.sort(function (a, b) {
            return Number(a.doc_count)< Number(b.doc_count) ? 1 : -1;
          })
          this.dChartOneData = d // 保存的一个结果
          this.maxKey = d[0].key // 最大key
          this.renderChartOne(d, true)
          this.getList(d)
          this.dChartOne.dispatchAction({
            type: "highlight",
            dataIndex: this.Index
          })
        } else {
          this.noData = true
        }
      }).catch(err => {})
    },
    renderChartOne(data, isClick) {
      let seriesData = []
      for(let i in data){
        let NameColor = '#878696'
        let lineColor = '#ccc'
        let fontWeight = '500'
        if(isClick && data[i].key === this.maxKey){
          NameColor='#514bad'
          fontWeight = 'bold'
          lineColor = '#514bad'
        }
        seriesData.push({
          name: data[i].key,
          value: data[i].doc_count,
          key: data[i].key,
          label:{
            normal:{
              rich: {
                name:{
                  color: NameColor,
                  fontWeight: fontWeight 
                } 
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: lineColor
              }
            }
          }
        })
      }
      
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c} ({d}%)",
          position: 'top'
        },
        color: Ecolors.color,
        series: [
          {
            type: 'pie',
            avoidLabelOverlap: true,
            legendHoverLink: true,
            // hoverAnimation: false,
            radius: ['38%', '56%'],
            minAngle: 30,
            startAngle: 70, //起始角度
            data: seriesData,
            itemStyle:{
              normal: {
                borderWidth: 2, 
                borderColor: '#fff',
              }
            },
            label: {
              show: true,
              position: 'outer',
              alignTo: 'labelLine',
              distanceToLabelLine: 5,
              formatter: (params) => {
                let str = ''
                if (params.name.length > 10) {
                  str += `{nameStyle|${params.name.substring(0, 10)}...}`
                } else {
                  str += `{nameStyle|${params.name}}`
                }
                // console.log(params)
                // str += `{nameStyle|${params.percent}%}`
                str = `{nameStyle|${params.percent}%}`
                return str
              },
              rich: {
                icon: {},
                nameStyle: {
                  fontSize: 12,
                  color: '#86899e'
                },
              }
            },
          }
        ]
      }
      this.dChartOne.hideLoading()
      this.dChartOne.setOption(option)

      this.dChartOne.dispatchAction({
        type: "highlight",
        dataIndex: this.Index
      })

    },
    getList(data) {
      let pArr = []
      let keyArr = []
      let maxCount = 0
      for (let i in data) {
        keyArr.push(data[i].key.length)
        maxCount += Number(data[i].doc_count)
      }
      let arr = []
      for (let i in data) {
        arr.push({
          color: Ecolors.color[i],
          key: data[i].key,
          percentage: (data[i].doc_count / maxCount * 100).toFixed(2)
        })
      }
      this.list = arr
    },
    dChartOneClick(v) {
      // 取消之前的高亮 或者默认
      this.dChartOne.dispatchAction({  
        type: 'downplay'
      })
      if (this.Index !== v.dataIndex) {
        this.Index = v.dataIndex // 点击高亮
        this.maxKey = v.data.key
        this.dChartOne.dispatchAction({
          type: "highlight",
          dataIndex: this.Index
        })
        // this.getTableData(v.name)
      } else {
        this.Index = -1
        this.maxKey = -1
        // this.getTableData()
      }
      this.renderChartOne(this.dChartOneData, true)
    },
    changeKey(key) {
      this.dChartOne.dispatchAction({  
        type: 'downplay'
      })
      if (this.maxKey !== key) {
        for (let i in this.dChartOneData) {
          if (key === this.dChartOneData[i].key) {
            this.Index = Number(i)
            this.maxKey = key
            this.dChartOne.dispatchAction({
              type: "highlight",
              dataIndex: this.Index
            })
            break
          }
        }
      } else {
        this.Index = -1
        this.maxKey = -1
      }
      
      this.renderChartOne(this.dChartOneData, true)
    },
    dChartOneMove(v) {
      if (v.dataIndex === this.Index) {
        this.dChartOne.dispatchAction({
          type: "highlight",
          dataIndex: this.Index
        })
      }
    }
  },
  watch: {
    info() {
      if (this.dChartOne) {
        this.dChartOne.on('mouseout', this.dChartOneMove)
        this.dChartOne.on('click', this.dChartOneClick)
        // this.getChartOneData()
      } 
    },
  },
  mounted() {
    // 涉及技术领域
    this.init()
  },
  beforeDestroy() {
    if (this.dChartOne) {
      this.dChartOne.off('mouseout')
      this.dChartOne.off('click')
      this.dChartOne.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  padding: 18%;
  margin-top: -18%;
  margin-left: -18%;
  border-radius: 50%;
  background-color: #eee;
}
.one-list-box {
  position: relative;
  left: 0;
  width: 100%;
  height: 30%;
  padding: 0 20px;
  overflow-y: auto;
}
.one-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  li {
    position: relative;
    width: 50%;
    padding-top: 6px;
    padding-bottom: 6px;
    // padding-right: 20px;
    box-sizing: border-box;
    cursor: pointer;
    &.active {
      p {
        font-weight: bold;
        color: #504da6;
        i {
          color: #504da6;
        }
      }
    }
    p {
      position: relative;
      padding-right: 10px;
      margin-bottom: 0;
      font-size: 14px;
      color: #7674a3;
      overflow: hidden;
      text-overflow: ellipsis;
      // white-space: nowrap;
      .point {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: -5px;
      }
      .label {
        display: inline-block;
        max-width: calc(100% - 74px);
        vertical-align: text-bottom;
        padding-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        display: inline-block;
        width: 74px;
        line-height: 18px;
        font-style: normal;
        vertical-align: baseline;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.no-data {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: -20px;
  text-align: center;
}
</style>